$(function () {
    // 1.在input中输入一条任务,回车该任务会出现在未完成列表中
    // 2.点击未完成任务列表,左侧checkbox该任务会移动到已完成任务列表中
    // 3.点击任务右侧的删除按钮会删除当前任务
    // 4.以上所有操作对应的数据都会保存(刷新或者关闭浏览器,打开仍然存在)

    //  核心思路,在事件处理函数中,先操作localStorage数据,然后根据最新的数据渲染dom

    reader()
    $('#title').on('keydown', function (event) {
        if (event.keyCode === 13) {
            // 读取本地存储的原来的数据
            var local = getDate()
            console.log(local);

            local.push({
                title: $(this).val(),
                done: false
            })
            // 设置列表
            setData(local)
            // 渲染列表
            reader()
        }
    })
    // 点击li中的a删除对应任务
    $('#todolist,#donelist').on('click', 'a', function () {
        // 获取所有任务
        var local = getDate()
        // 获取当前任务索引
        var i = $(this).attr('index')
        // 根据索引删除当前任务
        local.splice(i, 1)
        // 重新存入本地存储
        setData(local)
        // 重新渲染
        reader()

    })
    // 点击li中的checkbox将当前任务移动到另一个列表
    $('#todolist,#donelist').on('click', 'input', function () {
        // 获取当前任务

        var local = getDate()
        // 获取索引
        var i = $(this).siblings('a').attr('index')
        // 修改当前任务完成状态
        local[i].done = !local[i].done

        //重新存入本地存储
        setData(local)
        // 重新渲染
        reader()

    })


    // 封装函数
    // 获取原来的本地存储
    function getDate() {
        var data = localStorage.getItem('todolist')
        if (data !== null) {
            // 字符串格式转换为对象格式
            return JSON.parse(data)
        } else {
            return []
        }
    }
    // 将数据存入本地存储
    function setData(data) {
        localStorage.setItem('todolist', JSON.stringify(data))
    }

    //根据本地存储数据渲染列表
    function reader() {
        var local = getDate()
        $('#todolist,#donelist').empty()
        $.each(local, function (i, ele) {
            if (ele.done) {
                $('#donelist').prepend(`<li><input type="checkbox" checked ><p>${ele.title}</p><a href="javascript:;" index="${i}"></a></li>`)
            } else {
                $('#todolist').prepend(`<li><input type="checkbox" ><p>${ele.title}</p><a href="javascript:;" index="${i}"></a></li>`)
            }

        })
        // 统计完成还有未完成数量
        $('#todocount').html($('ol li').length)
        $('#donecount').html($('ul li').length)
    }

})